import React from 'react';
import { inject, observer } from 'mobx-react';
import { Tools, SwipeAction, Icon, Button,Result } from 'weaver-mobile';
import { ListViewPage } from 'weaver-mobile-page';
import { withRouter } from 'react-router-dom';

import { renderNoData } from '../public/BlogUtils';

const getLabel = Tools.getLabel;
@withRouter
@inject('userCenterStore')
@observer
export default class MsgRemind extends React.Component {
  static defaultProps = {
    prefixCls: 'blog-center-msgRemind'
  }

  componentDidMount() {
    const { userCenterStore: { msgRemindStore } } = this.props;
		msgRemindStore.getMsgRemindList();
  }

  componentWillUnmount() {
    const { userCenterStore: { msgRemindStore } } = this.props;
    msgRemindStore.msgClear();
  }
  deleteBack = (id) => {
    const { userCenterStore: { msgRemindStore, initMenuCountData } } = this.props;
    const { removeOperatedItem } = msgRemindStore;
    removeOperatedItem(id);
    initMenuCountData();
  }

	// 图标
	loadIcon = (remindType) => {
		switch (remindType * 1) {
				case 7:
						return ['blog-fill', '#f5b400']
				case 8:
						return ['blog-fill', '#32a8ff']
				case 11:
						return ['blog-dianzan', '#ED805A']
				case 12:
						return ['blog-pinglun', '#70D1E6']
				case 13:
						return ['blog-@', '#F3B04C']
				default:
						return ['blog-guanzhu', '#61A8F5']
		}
	}

	// 右侧按钮
	loadRrightButton = (remindType, id, relatedid) => {
    const { prefixCls, userCenterStore: { msgRemindStore, initMenuCountData } } = this.props;
    const { dealMsgRemind, neglectMsgRemind } = msgRemindStore;
		let buttonArr = [];
		if(remindType * 1 === 1) {
      buttonArr.push({
				text: getLabel(18186,'同意'),
				onPress: () => { dealMsgRemind({	id: id, relatedId: relatedid, opt: 1}, () => this.deleteBack(id)) },
        style: { width: 84 },
        className: `${prefixCls}-line-rightBtn-agree`
			});
			buttonArr.push({
				text: getLabel(25659,'拒绝'),
				onPress: () => { dealMsgRemind({	id: id, relatedId: relatedid, opt: -1}, () => this.deleteBack(id)) },
        style: { width: 84 },
        className: `${prefixCls}-line-rightBtn-refuse`
			});
		}
		buttonArr.push({
			text: getLabel(130373,'忽略'),
			onPress: () => { neglectMsgRemind({id: id,remindType: remindType}, initMenuCountData) },
      style: { width: 84 },
      className: `${prefixCls}-line-rightBtn-ignore`
		});
		return buttonArr;
  }
  
  getTemplate = () => {
    const { prefixCls } = this.props;
    const newTemp = {
      default: [{
        key: 'col_1',
        render: (data) => {
          const { username, msg, remindType, id, relatedid } = data;
          const iconData = this.loadIcon(remindType), iconName = iconData[0], iconColor = iconData[1];
          return (
            <SwipeAction
              autoClose
              right={ this.loadRrightButton(remindType, id, relatedid) }
            >
              <div className={`${prefixCls}-line`}>
                <Icon type={iconName} color={iconColor}/>
                <div className={`${prefixCls}-line-contaner`}>
                  {username && <span className={`${prefixCls}-line-contaner-name`}>{username}</span>}
                  <span
                    className={`${prefixCls}-line-contaner-tip`}
                    dangerouslySetInnerHTML={{__html: msg}}
                  />
                </div>
              </div>
            </SwipeAction>
          )
        }
      }]
    }
    return newTemp;
  }

  render() {
    const { prefixCls, userCenterStore: { msgRemindStore, initMenuCountData } } = this.props;
    const { msgRemindList, getMsgRemindList, neglectMsgRemindAll, igNoreDisabled } = msgRemindStore;
    return (
      <div className={prefixCls}>
        {
          igNoreDisabled ? <div className='blog-noData'>
              <Result
                  img={<Icon type="no-data" />}
                  message={getLabel(83553, '暂无数据')}
              />
          </div> : (
            <ListViewPage.Normal
              store={msgRemindList}
              getDataCustom
              getTemplate={this.getTemplate}
              customHeight='100%'
              rowKey='id'
              onRefresh={getMsgRemindList}
            />
          )
        }
        <Button type="primary" disabled={igNoreDisabled}  style={{"position": "absolute", "width":"100%", "bottom": "0px"}}  onClick={() => neglectMsgRemindAll(initMenuCountData)}>
          {getLabel(384387, '全部忽略')}
        </Button>
      </div>
    )
	}
}